<form nz-form [formGroup]="validateForm" (ngSubmit)="_submitForm()">
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label nz-form-item-required>E-mail</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
      <nz-input [nzSize]="'large'" formControlName="email" [nzId]="'email'"></nz-input>
      <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">邮箱不合法!</div>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label nz-form-item-required>Username</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
      <nz-input [nzSize]="'large'" formControlName="username" [nzId]="'username'"></nz-input>
      <div nz-form-explain *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('required')">
        请输入用户名!
      </div>
      <div nz-form-explain
           *ngIf="getFormControl('username').dirty&&(getFormControl('username').hasError('minlength')||getFormControl('username').hasError('maxlength'))">
        用户名长度为6-16个字符!
      </div>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label nz-form-item-required>Password</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
      <nz-input [nzSize]="'large'" formControlName="password" [nzType]="'password'" [nzId]="'password'"
                (ngModelChange)="updateConfirmValidator()"></nz-input>
      <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">
        请输入密码!
      </div>
      <div nz-form-explain
           *ngIf="getFormControl('password').dirty&&(getFormControl('password').hasError('minlength')||getFormControl('password').hasError('maxlength'))">
        密码长度为6-16个字符!
      </div>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label nz-form-item-required>Confirm Password</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
      <nz-input [nzSize]="'large'" formControlName="pass_repeat" [nzType]="'password'"
                [nzId]="'pass_repeat'"></nz-input>
      <div nz-form-explain
           *ngIf="getFormControl('pass_repeat').dirty&&getFormControl('pass_repeat').hasError('required')">请输入 Confirm
        Password!
      </div>
      <div nz-form-explain
           *ngIf="getFormControl('pass_repeat').dirty&&getFormControl('pass_repeat').hasError('confirm')">两次输入密码不一致!
      </div>
    </div>
  </div>
  <div nz-form-item nz-row style="margin-bottom:8px;">
    <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
      <button nz-button [nzSize]="'large'" [nzType]="'primary'">Register</button>
    </div>
  </div>
</form>
